<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="http://cdn.staticfile.org/cesium/1.69.0/Widgets/widgets.css">
    <link rel="stylesheet" href="../css//index.css">
</head>

<body>
    <div class="fun-menu">
        <button onclick="createVidoe()">创建视频</button>
        <button onclick="createImage()">创建图片</button>
        <button onclick="createText()">创建文字</button>
        <button onclick="createColor()">创建颜色</button>
        <button onclick="flyTo()">flyTo</button>
        <button onclick="updateUrl()">updateUrl</button>
        <button onclick="play()">play</button>
        <button onclick="pause()">pause</button>
        <button onclick="isShow()">显示隐藏投影内容</button>
        <button onclick="debugFrustum()">是否显示视锥线</button>
        <button onclick="fov()">宽高比例</button>
        <button onclick="aspectRatio()">水平拉伸</button>
        <button onclick="alpha()">透明度</button>
        <button onclick="rotateCamera()">微调相机(支持上下左右微调)</button>
        <button onclick="setPosition()">调整视点位置</button>
        <button onclick="setCameraPosition()">调整摄像头位置</button>
        <button onclick="params()">获得参数</button>
        <button onclick="removeVideo()">移除</button>
    </div>
    <div id=cesiumContainer></div>

    <script src="http://cdn.staticfile.org/cesium/1.69.0/Cesium.js"></script>

    <script src="../libs/cpc/index.js"></script>
    <script>
        const map = new cpc.Map({
            container: "cesiumContainer",
            baseMaps: [
                {
                    type: "TDTImageryLayer",
                    mold: "image",
                    tk: "7b435c61bff7f77eb49206e10d6397bd",
                },
            ],
            camera: { "position": { "x": 119.31898609220659, "y": 26.04675512125694, "z": 25.850702618687773 }, "angle": { "heading": 67.76, "pitch": -49.16, "roll": 0.003747231822869068 } },
            terrain: {
                type: "cesium",
                option: {
                    // url:"http://localhost/teerain/terrain",//本地福建地形
                    url: "http://data.marsgis.cn/terrain", //全国30m地形
                    // url:"https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path",//超图地形
                    requestWaterMask: true, //开启法向量
                    requestVertexNormals: true, //开启水面特效
                },
            },
        });

        function createVidoe() {
            map.viewer.scene.postProcessStages.fxaa.enabled = true;
            map.viewer.scene.globe.depthTestAgainstTerrain = true;//一定要地面以下不可见
            const option = {
                name: "视频融合",
                type: cpc.EVideoFusionType.Video,
                url: "../videos/1.mp4",//方式1
                // dom:document.getElementById("视频的id"),//方式2
                position: { x: -2807812, y: 4823345, z: 2783700 },
                cameraPosition: { x: -2807812, y: 4999571, z: 2783727 },
                fov: 84.3,
                aspectRatio: 2.6,
                alpha: 0.8,
                debugFrustum: true,

            }
            videoFusion = new cpc.VideoFusion("投影", option);
            map.add(videoFusion);
        }
        function createImage() {
            map.viewer.scene.postProcessStages.fxaa.enabled = true;
            map.viewer.scene.globe.depthTestAgainstTerrain = true;//一定要地面以下不可见
            const option = {
                name: "图片融合",
                type: cpc.EVideoFusionType.Image,
                url: "../images/maps/world.jpg",//方式1
                // dom:document.getElementById("图片的id"),//方式2
                position: { x: -2807812, y: 4999560, z: 2783700 },
                cameraPosition: { x: -2807812, y: 4999571, z: 2783727 },
                fov: 84.3,
                aspectRatio: 2.6,
                alpha: 0.8,
                debugFrustum: true,
            }
            videoFusion = new cpc.VideoFusion("投影", option);
            map.add(videoFusion);
        }
        function createText() {
            map.viewer.scene.postProcessStages.fxaa.enabled = true;
            map.viewer.scene.globe.depthTestAgainstTerrain = true;//一定要地面以下不可见
            const option = {
                name: "文字融合",
                type: cpc.EVideoFusionType.Text,
                text: "@CPC/cesium-api",
                position: { x: -2807812, y: 4999560, z: 2783700 },
                cameraPosition: { x: -2807812, y: 4999571, z: 2783727 },
                fov: 84.3,
                aspectRatio: 2.6,
                alpha: 0.8,
                debugFrustum: true,
            }
            videoFusion = new cpc.VideoFusion("投影", option);
            map.add(videoFusion);
        }
        function createColor() {
            map.viewer.scene.postProcessStages.fxaa.enabled = true;
            map.viewer.scene.globe.depthTestAgainstTerrain = true;//一定要地面以下不可见
            const option = {
                name: "颜色融合",
                type: cpc.EVideoFusionType.Color,
                position: { x: -2807812, y: 4999560, z: 2783700 },
                cameraPosition: { x: -2807812, y: 4999571, z: 2783727 },
                fov: 84.3,
                aspectRatio: 2.6,
                alpha: 0.8,
                debugFrustum: true,
                color: new Cesium.Color.fromRandom()
            }
            videoFusion = new cpc.VideoFusion("投影", option);
            map.add(videoFusion);
        }
        function setCameraPosition() {
            videoFusion.cameraPosition = { "x": -2479470.671960347, "y": 4823349.140907505, "z": 3345689.5223097503 };
        }
        function setPosition() {
            videoFusion.position = { "x": -2479435.597666218, "y": 4823357.848533492, "z": 3345659.582668391 };
        }
        function flyTo() {
            videoFusion.locate();
        }
        function isShow() {
            videoFusion.show = !videoFusion.show;
        }
        function updateUrl() {
            videoFusion.activeVideo("../videos/big_buck_bunny.mp4");
        }
        function play() {
            videoFusion.isPlayVideo = true;
        }
        function pause() {
            videoFusion.isPlayVideo = false;
        }
        function alpha() {
            videoFusion.alpha = 0.3;
        }
        function aspectRatio() {
            videoFusion.aspectRatio = 1.5;
        }
        function debugFrustum() {
            videoFusion.debugFrustum = !videoFusion.debugFrustum;
        }
        function fov() {
            videoFusion.fov = 100.5;
        }
        function rotateCamera() {
            videoFusion.rotateCamera(cpc.EVideoFusionRatateDirection.LEFT, 5);;
        }
        function params() {
            console.log("当前摄像头的参数为:", videoFusion.params);
        }
        function removeVideo() {
            map.remove(videoFusion);
        }
    </script>
</body>

</html>